<template>
  <div class="great">
    <Query ref="query" @querys="querys"/>
    <Box>
      <div slot="box">
        <div style="padding-bottom: 15px">
<!--          <a-button @click="showModal">导入</a-button>-->
          <a-button style="margin-left: 10px;" @click="getexcel">导出</a-button>
<!--          <a-button type="primary" @click="upload" style="margin-left: 10px;">事件上报</a-button>-->
        </div>
        <CustomTable
          ref="table"
          :showAlert="false"
          :columns="columns"
          :dataSource="pageData"
          :showSelection="true"
          :showPagination="true"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :customRow="clickCustomRow"
          rowKey="id"
          :loading="loading"
          @change="onTableChange"
        >
          <template slot="state" slot-scope="text, record">
            <a href="javascript:;" :style="text == '已完结' ? 'color: #888888;' : 'color: blue;' ">{{text}}</a>
          </template>
          <template slot="caozuo" slot-scope="text, record">
            <div style="display: flex;justify-content: center">
              <a href="javascript:;" @click="look(record)">查看</a>&emsp;
              <j-select-user-by-dep v-if="record.state != '已完结' && userIdentity"
                                    :multi="false" :item="true" :eventId="record.lineId" eventType="线路案事件"></j-select-user-by-dep>
            </div>

          </template>
        </CustomTable>
      </div>
    </Box>
    <a-modal v-model="visible" title="详细信息" @ok="handleOk" width="600px" centered>
      <Input ref="input" @warn="warn"></Input>
    </a-modal>
    <a-modal v-model="visible1" title="详细信息" @ok="handleOk1" width="600px" centered>
      <!--        <Input ref="input"></Input>-->
      <div v-for="item of this.warns">
        <div style="color: red;font-size: 15px">{{item}}</div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import Query from '@/views/xlgc/lawCase/queryFacility'
import Box from '@views/xlgc/Box'
import { getDictItemsFromCache } from '@api/api'
import { getXLlist, getXLexcel, getMAexcel } from '@/api/xlgc/lawCase'
import CustomTable from '@/components/zxd/Table/CustomTable'
import Input from './ImportModal'
import * as api from '@api/xlgc/alarmCenter'
import Vue from "vue";
import {USER_INFO} from "@/store/mutation-types";
import JSelectUserByDep from '@/views/xlgc/lawCase/LifeCase/details/JSelectUserByDep'

export default {
  name: 'great',
  components: { Box , CustomTable,Query,Input,JSelectUserByDep},
  data(){
    return {
      warns:[],
      visible:false,
      visible1:false,
      selectedRowKeys: [],
      selectedRows:[],
      dateFormat: 'YYYY-MM-DD',
      value:1,
      input:{
        input1:''
      },
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '案事件编号',
          dataIndex:'code',
          scopedSlots: { customRender: 'code' },
        },
        {
          title: '案(事)件名称',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '案(事)件性质',
          dataIndex: 'nature',
          scopedSlots: { customRender: 'nature' },
          customRender: (text,record) => {
            //字典值翻译通用方法
            return this.filterMultiDictText('event_category', text)
          }
        },
        {
          title: '发生地点',
          dataIndex: 'occurrencePlace',
          scopedSlots: { customRender: 'occurrencePlace' }
        },
        {
          title: '发生日期',
          dataIndex: 'occurrenceDate',
          scopedSlots: { customRender: 'occurrenceDate' }
        },
        {
          title: '状态',
          width: 90,
          align: 'center',
          dataIndex: 'state',
          scopedSlots: { customRender: 'state' }
        },
        {
          title: '操作',
          // width: 90,
          align: 'center',
          dataIndex: 'caozuo',
          scopedSlots: { customRender: 'caozuo' }
        }
      ],
      pageData:{},
      loading: false,
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      formData:{
        code:'',
        dateStr:'',
        nature:'',
        name:'',
        state:''
      },
      userIdentity:false
    }
  },
  mounted() {
    let user = Vue.ls.get(USER_INFO)
    console.log(user)
    this.userIdentity = user.userIdentity === 2
    let data = Object.assign({},this.formData,this.pageFilter)
    this.refreshTable(data)
    console.log(this.$store.state.user.token)
  },
  methods:{
    showModal(val) {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.$refs.input.handleOk()
      // this.visible = false;
    },
    handleOk1(){
      this.visible1 = false
    },
    onSelectChange(selectedRowKeys,selectedRows) {
      console.log('selectedRowKeys changed: ', selectedRowKeys,selectedRows);
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows
    },
    upload(){
      this.$router.push({
        path: '/route/upload',
      })
    },
    querys(val){
      console.log(val)
      this.refreshTable(Object.assign({},this.pageFilter,val))
    },
    downLoadMix(res, fileName) {
      let blob = new Blob([res]) //res为从后台返回的数据
      if (!fileName) {
        fileName = res.headers['content-disposition'].split('filename=').pop()
      }
      if ('msSaveOrOpenBlob' in navigator) {
        window.navigator.msSaveOrOpenBlob(blob, fileName)
      } else {
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href)
        document.body.removeChild(elink)
      }
    },
    getexcel(){
      let arr =[]
      for(let item of this.selectedRows){
        arr.push(item.lineId)
      }
      console.log(arr)
      getXLexcel({ids:arr}).then(response => {
        console.log(response)
        const fileName = '线路案事件导出数据.xlsx'
        this.downLoadMix(response, fileName)
      }).catch(error => {
        console.log(error)
      })
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable(Object.assign({},this.formData,this.pageFilter))
    },
    clickCustomRow(record, index) {
      var _this = this
      return {
        on: {
          // 事件
          click: () => {

          }
        }
      }
    },
    look(record){
      console.log(record)
      this.$router.push({
        path: '/LifeCase/detailed',
        query: {
          itemId:'线路案事件',
          item:'Xi',
          id:record.lineId
        }
      })
    },
    warn(val){
      if(val){
        console.log(val)
        this.visible = false
        this.refreshTable(this.pageFilter)
      }else{
        console.log(val)
        this.warns = val.result
        if(!val.success){
          console.log(this.warns)
          this.visible1 = true
        }
      }

    },
    refreshTable(val) {
      this.loading = true
      getXLlist(val)
        .then(res => {
          if (res.success) {
            this.pageData = res.result
            this.loading = false
          } else {
            this.loading = false
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    filterMultiDictText(dictCode, text) {
      console.log(dictCode,text)
      if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    },
  }
}
</script>

<style scoped>
.gutter-row{
  display: flex;
  align-items: center;
}


</style>